<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>type</view>
				<view>String</view>
				<view>primary</view>
				<view>颜色主题</view>
			</view>
			<view class="tr">
				<view>color</view>
				<view>String</view>
				<view>无</view>
				<view>自定义主题色</view>
			</view>
			<view class="tr">
				<view>textColor</view>
				<view>String</view>
				<view>无</view>
				<view>固定文字色</view>
			</view>
			<view class="tr">
				<view>radius</view>
				<view>String, Number</view>
				<view>0.5em</view>
				<view>日期圆角，可带单位</view>
			</view>
			<view class="tr">
				<view>size</view>
				<view>String</view>
				<view>md</view>
				<view>预定尺寸，对弹窗按钮、日历提交按钮有效</view>
			</view>
			<view class="tr">
				<view>title</view>
				<view>String</view>
				<view>无</view>
				<view>弹窗标题</view>
			</view>
			<view class="tr">
				<view>useTitle</view>
				<view>Boolean</view>
				<view>true</view>
				<view>使用弹窗标题</view>
			</view>
			<view class="tr">
				<view>width</view>
				<view>String</view>
				<view>100vw</view>
				<view>弹窗宽度</view>
			</view>
			<view class="tr">
				<view>maxWidth</view>
				<view>String</view>
				<view>40em</view>
				<view>弹窗最大宽度</view>
			</view>
			<view class="tr">
				<view>boxRadius</view>
				<view>String</view>
				<view>0.5em</view>
				<view>外框圆角，须带单位</view>
			</view>
			<view class="tr">
				<view>value</view>
				<view>String, Number, Date, Array</view>
				<view>无</view>
				<view>日期初始选中值</view>
			</view>
			<view class="tr">
				<view>point</view>
				<view>String</view>
				<view>bottom</view>
				<view>弹窗位置，可选center、bottom</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>radio</view>
				<view>选取模式，可选radio单选、checkbox多选、range选区</view>
			</view>
			<view class="tr">
				<view>pickType</view>
				<view>Boolean, String</view>
				<view>false</view>
				<view>特殊拾取类型，false(date)为日期类、datetime日期时间、month月份、year年份、monthYear年月</view>
			</view>
			<view class="tr">
				<view>useSecond</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启秒，拾取类型为datetime时有效</view>
			</view>
			<view class="tr">
				<view>activeSubmit</view>
				<view>Boolean</view>
				<view>false</view>
				<view>点击日期立即提交，radio单选模式有效</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>formatSet</view>
					<view>Object</view>
					<view>无</view>
					<view>日历内部时间显示格式，头部标题及工具条</view>
				</view>
				<view class="appendix">
					<view>year: YYYY年</view>
					<view>month: MM月</view>
					<view>time: hh:mm:ss</view>
					<view>timeM: hh:mm</view>
				</view>
			</view>
			<view class="tr">
				<view>weekSet</view>
				<view>Object</view>
				<view>无</view>
				<view>星期显示文字定义，格式：{0:"周日", 1:"周一", ...}</view>
			</view>
			<view class="tr">
				<view>weekHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>星期条高度，固定单位em</view>
			</view>
			<view class="tr">
				<view>rowHeight</view>
				<view>Number</view>
				<view>3</view>
				<view>日期行高，固定单位em</view>
			</view>
			<view class="tr">
				<view>weekendType</view>
				<view>String</view>
				<view>无</view>
				<view>周末主题色</view>
			</view>
			<view class="tr">
				<view>weekendColor</view>
				<view>String</view>
				<view>无</view>
				<view>周末自定义色</view>
			</view>
			<view class="tr">
				<view>rangeBgOpacity</view>
				<view>Number</view>
				<view>0.1</view>
				<view>选区背景透明度</view>
			</view>
			<view class="tr">
				<view>pickerRadius</view>
				<view>String</view>
				<view>无</view>
				<view>拾取器按钮圆角</view>
			</view>
			<view class="tr">
				<view>start</view>
				<view>Number, String, Date</view>
				<view>无</view>
				<view>选取限制，开始日期</view>
			</view>
			<view class="tr">
				<view>end</view>
				<view>Number, String, Date</view>
				<view>无</view>
				<view>选取限制，结束日期</view>
			</view>
			<view class="tr">
				<view>min</view>
				<view>Number</view>
				<view>1</view>
				<view>最少选取个数，checkbook模式有效</view>
			</view>
			<view class="tr">
				<view>max</view>
				<view>Number</view>
				<view>无</view>
				<view>最大选取个数，checkbook模式有效</view>
			</view>
			<view class="tr">
				<view>useLunar</view>
				<view>Boolean</view>
				<view>false</view>
				<view>开启农历标签</view>
			</view>
			<view class="tr">
				<view>tagList</view>
				<view>Array</view>
				<view>无</view>
				<view>自定义标签，格式：{ name:"标题", value:"时间，天", event:"事件名", }</view>
			</view>
			<view class="tr">
				<view>tipsFormat</view>
				<view>String</view>
				<view>YYYY-MM-DD</view>
				<view>工具栏显示已选的日期格式</view>
			</view>
			<view class="tr">
				<view>resFormat</view>
				<view>String</view>
				<view>无</view>
				<view>返回结果格式，可选ISO字串、UTC字串、Date对象，默认timestamp时间戳</view>
			</view>
			<view class="tr">
				<view>shift</view>
				<view>Object</view>
				<view>无</view>
				<view>窗口偏移，限制popup的显示区，用于自定义导航及自定义tab栏等。left、right、top、bottom</view>
			</view>
			<view class="tr">
				<view>spaceOutside</view>
				<view>Number, String, Array</view>
				<view></view>
				<view>对话框外间距，需带单位，可设置从上开始顺时针四个方向。top类型默认0.5em。bottom类型默认0.5em，下1.5em</view>
			</view>
			<view class="tr">
				<view>spaceInside</view>
				<view>Number, String, Array</view>
				<view></view>
				<view>对话框内间距，需带单位，可设置从上开始顺时针四个方向。top类型默认上0.5em。bottom类型默认下0.5em</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>icon</view>
					<view>Object</view>
					<view></view>
					<view>iconfont图标数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"图标名"}
					<view>calendar：icon-calendar 日期</view>
					<view>time：icon-clock 时间</view>
					<view>to：icon-to 至，month组件默认icon-arr-double-right</view>
					<view>prevMonth：icon-arr-left 上一月</view>
					<view>nextMonth：icon-arr-right 下一月</view>
					<view>prevYear：icon-arr-double-left 上一年</view>
					<view>nextYear：icon-arr-double-right 下一年</view>
					<view>delete：icon-delete-small 删除</view>
					<view>reset：icon-reset 重置</view>
					<view>prev：icon-arr-left month组件上一年</view>
					<view>next：icon-arr-double-right month组件上一年</view>
				</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}
					<view>confirm：确定　确定按钮</view>
					<view>cancel：取消　取消按钮</view>
				</view>
			</view>
			<view class="tr">
				<view>disabled</view>
				<view>Boolean</view>
				<view>false</view>
				<view>禁用</view>
			</view>
			<view class="tr">
				<view>readOnly</view>
				<view>Boolean</view>
				<view>false</view>
				<view>只读</view>
			</view>
			<view class="tr">
				<view>@submit</view>
				<view>事件</view>
				<view>	</view>
				<view>选取提交事件，依照resFormat设置提交已选值</view>
			</view>
		</view>
		
		
		<view class="p-sm">
			<view class="py-sm">
				基本使用：{{`&lt;vi-calendar :value="当前值">&lt;/vi-calendar>`}}
			</view>
			<view class="py-sm">
				<view class="">
					<vi-datetime ref="demo1" pickType="datetime" @submit="showRes"></vi-datetime>
					<vi-button @click="openWin('demo1')">单选</vi-button>
				</view>
			</view>
			<view class="py-sm">
				<view class="">
					<vi-datetime ref="demo2" mode="checkbox" @submit="showRes"></vi-datetime>
					<vi-button @click="openWin('demo2')">多选</vi-button>
				</view>
			</view>
			<view class="py-sm">
				<view class="">
					<vi-datetime ref="demo3" mode="range" @submit="showRes"></vi-datetime>
					<vi-button @click="openWin('demo3')">选区</vi-button>
				</view>
			</view>
			<view class="py-sm">
				<view class="">
					<vi-datetime ref="demo4" mode="radio" pickType="year" @submit="showRes"></vi-datetime>
					<vi-button @click="openWin('demo4')">选年</vi-button>
				</view>
			</view>
			<view class="py-sm">
				<view class="">
					<vi-datetime ref="demo5" mode="checkbox" plain pickType="month" @submit="showRes"></vi-datetime>
					<vi-button @click="openWin('demo5')">选月</vi-button>
				</view>
			</view>
			<view class="py-sm">
				<view class="">
					<vi-datetime ref="demo6" mode="range" pickType="monthYear" @submit="showRes"></vi-datetime>
					<vi-button @click="openWin('demo6')">选年月</vi-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			showRes(e){
				console.log(e);
			}
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
